import 'package:app/pages/mechat/layout/cut_corners_border.dart';
import 'package:flutter/material.dart';

import 'package:flutter/foundation.dart';

import './layout/adaptive.dart';
import 'layout/image_placeholder.dart';

class MechatLogin extends StatefulWidget {
  const MechatLogin({super.key});

  @override
  State<MechatLogin> createState() => _MechatLogin();
}

class _MechatLogin extends State<MechatLogin> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Stack(
        children: [
          Center(child: LayoutBuilder(
              builder: (BuildContext context, BoxConstraints constraints) {
            double width = constraints.maxWidth;
            double childWidth = width > 1000 ? 450 : width;

            return Container(
              width: childWidth,
              padding: const EdgeInsets.all(20),
              child: const Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  _ShrineLogo(),
                  SizedBox(height: 40),
                  _UsernameTextField(),
                  SizedBox(height: 16),
                  _PasswordTextField(),
                  SizedBox(height: 24),
                  _CancelAndNextButtons(),
                  SizedBox(height: 62),
                ],
              ),
            );
          })),
          Positioned(
              left: 0,
              bottom: 13,
              width: MediaQuery.of(context).size.width,
              child: Container(
                alignment: Alignment.center,
                child:
                    Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                  TextButton(
                    onPressed: () {
                      Navigator.pushNamed(context, "/mechat/register");
                    },
                    child: const Text("注册"),
                  ),
                  const Text("|"),
                  TextButton(
                    onPressed: () {
                      Navigator.pushNamed(context, "/mechat/forgot");
                    },
                    child: const Text("找回"),
                  )
                ]),
              )),
        ],
      ),
    );
  }
}

const mediumLetterSpacing = 0.04;
const largeLetterSpacing = 1.0;

double letterSpacingOrNone(double letterSpacing) =>
    kIsWeb ? 0.0 : letterSpacing;

class _ShrineLogo extends StatelessWidget {
  const _ShrineLogo();

  @override
  Widget build(BuildContext context) {
    return ExcludeSemantics(
      child: Column(
        children: [
          const SizedBox(
            width: 34,
            height: 34,
            child: FadeInImagePlaceholder(
              image: AssetImage('assets/mechat/diamond.png'),
              placeholder: SizedBox(
                width: 34,
                height: 34,
              ),
            ),
          ),
          const SizedBox(height: 16),
          Text(
            'MeChat',
            style: Theme.of(context).textTheme.headlineSmall,
          ),
        ],
      ),
    );
  }
}

class _UsernameTextField extends StatelessWidget {
  const _UsernameTextField();

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;

    return TextField(
      textInputAction: TextInputAction.next,
      restorationId: 'username_text_field',
      cursorColor: colorScheme.onSurface,
      decoration: InputDecoration(
        labelText: '邮箱',
        hintText: "邮箱/用户名",
        labelStyle: TextStyle(
          letterSpacing: letterSpacingOrNone(mediumLetterSpacing),
        ),
        border: const CutCornersBorder(
          borderSide: BorderSide(color: Colors.black, width: 0.5),
        ),
        contentPadding:
            const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
      ),
    );
  }
}

class _PasswordTextField extends StatelessWidget {
  const _PasswordTextField();

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;

    return TextField(
      restorationId: 'password_text_field',
      cursorColor: colorScheme.onSurface,
      obscureText: true,
      decoration: InputDecoration(
        labelText: '密码',
        labelStyle: TextStyle(
          letterSpacing: letterSpacingOrNone(mediumLetterSpacing),
        ),
        border: const CutCornersBorder(
          borderSide: BorderSide(color: Colors.black, width: 0.5),
        ),
        contentPadding:
            const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
      ),
    );
  }
}

class _CancelAndNextButtons extends StatelessWidget {
  const _CancelAndNextButtons();

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;

    final isDesktop = isDisplayDesktop(context);

    final buttonTextPadding = isDesktop
        ? const EdgeInsets.symmetric(horizontal: 24, vertical: 16)
        : EdgeInsets.zero;

    return Padding(
      padding: isDesktop ? EdgeInsets.zero : const EdgeInsets.all(8),
      child: OverflowBar(
        spacing: isDesktop ? 0 : 8,
        alignment: MainAxisAlignment.end,
        children: [
          TextButton(
            style: TextButton.styleFrom(
              shape: const BeveledRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(7)),
              ),
            ),
            onPressed: () {
              // The login screen is immediately displayed on top of
              // the Shrine home screen using onGenerateRoute and so
              // rootNavigator must be set to true in order to get out
              // of Shrine completely.
              Navigator.of(context, rootNavigator: true).pop();
            },
            child: Padding(
              padding: buttonTextPadding,
              child: Text(
                "取消",
                style: TextStyle(color: colorScheme.onSurface),
              ),
            ),
          ),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              elevation: 8,
              shape: const BeveledRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(7)),
              ),
            ),
            onPressed: () {
              // Navigator.of(context).restorablePushNamed(ShrineApp.homeRoute);
            },
            child: Padding(
              padding: buttonTextPadding,
              child: Text(
                '下一步',
                style: TextStyle(
                    letterSpacing: letterSpacingOrNone(largeLetterSpacing)),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
